---
title: Dimensions
---

import Seo from '../../../components/Seo.astro'
import Badge from '../../../components/Badge.astro'

<Seo
    seo={{
        title: 'Dimensions',
        description: 'How to access your device dimensions with react-native-unistyles'
    }}
>

Unistyles provides rich metadata about your device dimensions. This is useful for creating responsive designs as well as avoiding additional hooks that require passing values to stylesheets. 
Every prop can be accessed with [UnistylesRuntime](/reference/unistyles-runtime). 
Dimensions are always up to date and are updated based on Unistyles' core logic, e.g., when the device orientation changes.

### Accessing dimensions

In order to start using the dimensions metadata, you need to import `UnistylesRuntime`:

```tsx /UnistylesRuntime/
import { UnistylesRuntime } from 'react-native-unistyles'
```

`UnistylesRuntime` can be used in your component as well as directly in the stylesheet.

:::tip[UnistylesRuntime]
Using UnistylesRuntime in your stylesheet has additional benefit, it will update (re-render) your stylesheets when the dimensions change. 
:::

### Screen dimensions

<Badge label="All platforms" />
<Badge label="2.0.0" />

The most basic dimensions are the screen dimensions. These are the dimensions of the screen that your app is running on.
You can access them with `screen` prop:

```tsx /screen/
import { UnistylesRuntime } from 'react-native-unistyles'

UnistylesRuntime.screen.width // eg. 400
UnistylesRuntime.screen.height // eg. 760
```

### Status bar

<Badge label="iOS" />
<Badge label="Android" />
<Badge label="2.4.0" />

You can access status bar dimensions with `statusBar` prop:

```tsx /statusBar/
import { UnistylesRuntime } from 'react-native-unistyles'

UnistylesRuntime.statusBar.width // eg. 400
UnistylesRuntime.statusBar.height // eg. 24
```

This prop may be useful for creating custom headers. In most of the cases status bar height is equal to the top inset, but on some devices it may be different.
Status bar height is not dynamic and won't cover hiding it.

### Navigation bar

<Badge label="Android" />
<Badge label="2.4.0" />

You can access navigation bar dimensions with `navigationBar` prop:

```tsx /navigationBar/
import { UnistylesRuntime } from 'react-native-unistyles'

UnistylesRuntime.navigationBar.width // eg. 400
UnistylesRuntime.navigationBar.height // eg. 24
```

This prop may be useful for creating custom bottom bars. In most of the cases navigation bar height is equal to the bottom inset, but on some devices it may be different.
Navigation bar height is not dynamic.

### Insets

<Badge label="iOS" />
<Badge label="Android" />
<Badge label="2.4.0" />

Insets are the safe areas of the screen. They are used to avoid overlapping with system UI elements such as the status bar, navigation bar, and home indicator.
You can access them with `insets` prop:

```tsx /insets/
import { UnistylesRuntime } from 'react-native-unistyles'

UnistylesRuntime.insets.top // eg. 42
UnistylesRuntime.insets.bottom // eg. 24
UnistylesRuntime.insets.left // eg. 0, or in vertical orientation can be top inset
UnistylesRuntime.insets.right // eg. 0
```

Insets can be used directly in your stylesheets to avoid passing values from `useSafeAreaInsets` hook from [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context?tab=readme-ov-file#usesafeareainsets) library.

Insets on Android respect following setups:

##### Modifying dynamicaly StatusBar API:

```tsx
<StatusBar />
<StatusBar hidden />
<StatusBar translucent />
```

##### Adding some window flags to `styles.xml`:

```xml
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
```

##### Modifying window flags (full screen mode):

```kotlin /FLAG_LAYOUT_NO_LIMITS/
val activity = currentActivity
activity?.runOnUiThread {
    activity.window.addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS)
}
```
:::caution
Android has many different APIs to read window insets. It works stable from Android SDK 30+ (Android 11) and below API 28 (Android 9) when cutout support was added.

If you find any issue (especially on Android 9 or 10), please report it with your device model and Android version as well as statusbar/window/xml flags.
:::

</Seo>
